<template>
    <view class="about-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <text class="nav-title">关于我们</text>
        </view>
        
        <!-- 公司Logo -->
        <view class="logo-section">
            <image src="/static/logo.png" mode="aspectFit" class="company-logo"></image>
            <text class="company-name">浩原科技</text>
            <text class="company-slogan">给我一份需求，还你一份完美</text>
        </view>
        
        <!-- 公司简介 -->
        <view class="info-card">
            <view class="card-title">公司简介</view>
            <view class="card-content">
                <text class="content-text">浩原科技是一家专注于软件定制开发的技术服务公司，拥有百人级专业技术团队，致力于为客户提供高品质、高效率的软件开发解决方案。</text>
                <text class="content-text">我们擅长开发各类小程序、APP、系统，根据客户需求量身打造专属应用，让您的创意和业务需求得到完美实现。</text>
                <text class="content-text">工作室创始人---何平安：一个热爱编程的大学生 |兴趣|毅力|创新|前沿| 个人简介：<text class="copy-link" @click="copyUrl">🗒</text></text>
            </view>
        </view>
        
        <!-- 核心服务 -->
        <view class="info-card">
            <view class="card-title">核心服务</view>
            <view class="service-grid">
                <view class="service-item">
                    <view class="service-icon">📱</view>
                    <view class="service-name">小程序开发</view>
                </view>
                <view class="service-item">
                    <view class="service-icon">💻</view>
                    <view class="service-name">APP开发</view>
                </view>
                <view class="service-item">
                    <view class="service-icon">🖥️</view>
                    <view class="service-name">系统开发</view>
                </view>
                <view class="service-item">
                    <view class="service-icon">🔧</view>
                    <view class="service-name">定制软件</view>
                </view>
                <view class="service-item">
                    <view class="service-icon">🛠️</view>
                    <view class="service-name">技术支持</view>
                </view>
                <view class="service-item">
                    <view class="service-icon">🚀</view>
                    <view class="service-name">项目维护</view>
                </view>
            </view>
        </view>
        
        <!-- 我们的优势 -->
        <view class="info-card">
            <view class="card-title">我们的优势</view>
            <view class="advantage-list">
                <view class="advantage-item">
                    <view class="advantage-icon">⭐</view>
                    <view class="advantage-content">
                        <text class="advantage-title">专业团队</text>
                        <text class="advantage-desc">百人级技术团队，拥有丰富的项目经验</text>
                    </view>
                </view>
                <view class="advantage-item">
                    <view class="advantage-icon">⭐</view>
                    <view class="advantage-content">
                        <text class="advantage-title">快速交付</text>
                        <text class="advantage-desc">高效开发流程，确保项目按时交付</text>
                    </view>
                </view>
                <view class="advantage-item">
                    <view class="advantage-icon">⭐</view>
                    <view class="advantage-content">
                        <text class="advantage-title">品质保证</text>
                        <text class="advantage-desc">严格的质量控制，确保产品稳定可靠</text>
                    </view>
                </view>
                <view class="advantage-item">
                    <view class="advantage-icon">⭐</view>
                    <view class="advantage-content">
                        <text class="advantage-title">售后无忧</text>
                        <text class="advantage-desc">30天bug免费修复，1年免费技术支持</text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 技术栈 -->
        <view class="info-card">
            <view class="card-title">擅长技术栈</view>
            <view class="tech-tags">
                <text class="tech-tag">Java</text>
                <text class="tech-tag">Python</text>
                <text class="tech-tag">JavaScript</text>
                <text class="tech-tag">Vue</text>
                <text class="tech-tag">UniApp</text>
                <text class="tech-tag">SpringBoot</text>
            </view>
        </view>
        
        <!-- 联系我们 -->
        <view class="info-card">
            <view class="card-title">联系我们</view>
            <view class="contact-list">
                <view class="contact-item" @click="copyContact('wechat')">
                    <text class="contact-label">微信：</text>
                    <text class="contact-value">hepinganheliuyi</text>
                    <text class="copy-btn">复制</text>
                </view>
                <view class="contact-item" @click="copyContact('email')">
                    <text class="contact-label">邮箱：</text>
                    <text class="contact-value">1641436566@qq.com</text>
                    <text class="copy-btn">复制</text>
                </view>
            </view>
        </view>
        
        <!-- 底部版权 -->
        <view class="footer">
            <text class="copyright">© 2025 黔江区浩原科技工作室(个体工商户)</text>
        </view>
    </view>
</template>

<script setup>
// 复制联系方式
const copyContact = (type) => {
    let content = '';
    if (type === 'wechat') {
        content = 'hepinganheliuyi';
    } else if (type === 'email') {
        content = '1641436566@qq.com';
    }
    
    uni.setClipboardData({
        data: content,
        success: () => {
            uni.showToast({
                title: '已复制到剪贴板',
                icon: 'success'
            });
        }
    });
};

// 复制个人简介URL
const copyUrl = () => {
    uni.setClipboardData({
        data: 'https://hepingan.top/#/profile',
        success: () => {
            uni.showToast({
                title: '已复制个人简介链接',
                icon: 'success'
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.about-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
    padding-bottom: 40rpx;
}

/* 导航栏样式 */
.nav-bar {
    background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #2D1457;
}

.nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #A259FF;
}

/* Logo区域 */
.logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;
}

.company-logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 30rpx rgba(123, 47, 242, 0.3);
}

.company-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10rpx;
}

.company-slogan {
    font-size: 28rpx;
    color: #A259FF;
}

/* 卡片样式 */
.info-card {
    margin: 30rpx;
    padding: 30rpx;
    background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx #7B2FF244;
    border: 1px solid #2D1457;
}

.card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #A259FF;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
}

.card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 30rpx;
    background: linear-gradient(to bottom, #7B2FF2, #10AEFF);
    border-radius: 3rpx;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.content-text {
    font-size: 28rpx;
    color: #B8B8D1;
    line-height: 1.6;
}

/* 服务网格 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30rpx;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background: rgba(45, 20, 87, 0.3);
    border-radius: 12rpx;
    border: 1px solid #2D1457;
}

.service-icon {
    font-size: 48rpx;
    margin-bottom: 10rpx;
}

.service-name {
    font-size: 24rpx;
    color: #fff;
}

/* 优势列表 */
.advantage-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
}

.advantage-icon {
    font-size: 32rpx;
    color: #A259FF;
}

.advantage-content {
    flex: 1;
}

.advantage-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8rpx;
    display: block;
}

.advantage-desc {
    font-size: 26rpx;
    color: #B8B8D1;
    line-height: 1.5;
}

/* 技术标签 */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.tech-tag {
    padding: 10rpx 20rpx;
    background: rgba(123, 47, 242, 0.2);
    color: #A259FF;
    font-size: 24rpx;
    border-radius: 30rpx;
    border: 1px solid #7B2FF2;
}

/* 联系方式 */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: rgba(45, 20, 87, 0.3);
    border-radius: 12rpx;
    border: 1px solid #2D1457;
}

.contact-label {
    font-size: 28rpx;
    color: #B8B8D1;
    margin-right: 10rpx;
}

.contact-value {
    flex: 1;
    font-size: 28rpx;
    color: #fff;
}

.copy-btn {
    background: linear-gradient(45deg, #7B2FF2, #10AEFF);
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
}

/* 底部版权 */
.footer {
    text-align: center;
    padding: 40rpx 0;
}

.copyright {
    font-size: 24rpx;
    color: #B8B8D1;
}

.copy-link {
    color: #A259FF;
    text-decoration: underline;
    cursor: pointer;
}
</style>